<!--  -->
<template>
  <dv-border-box-1>dv-border-box-1</dv-border-box-1>

  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">折线图测试</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div id="ddd" ref="myChart" style="width: 200px;height: 200px;">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getTest } from "@/api/test"
  export default {
    name: "myTest",
    data() {
      return {
      }
    },
    mounted() {
      this.test();
      this.getContent();
    },
    methods: {
      // 绘图
      test() {
        var chartDom = this.$refs['myChart']
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'line',
              symbol: 'triangle',
              symbolSize: 20,
              lineStyle: {
                color: '#5470C6',
                width: 4,
                type: 'dashed'
              },
              itemStyle: {
                borderWidth: 3,
                borderColor: '#EE6666',
                color: 'yellow'
              }
            }
          ]
        };

        option && myChart.setOption(option);

      },

      // 请求网址测试
      getContent() {
        getTest().then(res => {
          console.log(res);
        })
      }
    }
  }
</script>

<style scoped>

</style>